<template>
    <div class="allout">
        <headbar title="四方地理" 
        :right="true" 
        classleft="el-icon-picture" 
        classright="el-icon-search"
        @handleright="tosearch()"></headbar>
        <div class="mar">
            <div class="citykey">
                <el-button type="primary" plain size="mini" @click="turncity()">全部</el-button>
                <el-button type="primary" plain size="mini" @click="changecity($store.state.userobj.livecity||'武汉')">{{ $store.state.userobj.livecity||'武汉' }}</el-button>
                <el-button 
                type="primary" plain 
                size="mini" 
                v-for="(item,index) in citykey" 
                :key="index"
                @click="changecity(item.name)">{{ item.name }}</el-button>
            </div>
            <div class="mainbox">
                <windows 
                v-for="(item,index) in windowitem" 
                :key="index" :img="item.picture[0]" 
                :name="item.name" 
                :text="item.story" 
                @click.native="turnmore(item)"></windows>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import windows from '@/components/windows.vue'
import headbar from '@/components/headbar.vue'
export default {
    components:{
        windows,
        headbar
    },
    mounted(){
        console.log(this.$store.state.userobj.livecity||'武汉')
        axios('http://localhost:3000/attractions').then(res=>{
            for(let i=0;i<res.data.length;i++){
                if(res.data[i].city === this.$store.state.city){
                    this.windowitem.push(res.data[i])
                }
            }
        })
    },
    data(){
        return{
            datalist:{},
            activeIndex: '1',
            activeIndex2: '1',
            windowitem: [],
            citykey:[{name:'上海'},{name:'南京'},{name:'西安'}]
        }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      turncity(){
        this.$router.push('/city')
      },
      changecity(city){
        this.$store.commit('changeCity',city)
        location.reload()
      },
      turnmore(item){
        this.$store.commit('giveToMore',item)
        this.$router.push(`/more`)
      },
      tosearch(){
        this.$router.push('/search')
        console.log(1)
      }
    }
}
</script>

<style lang="scss" scoped>
.allout{
    margin-bottom: 0.55rem;
}
.citykey{
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid rgb(74, 152, 126);
    margin-bottom: 5px;
    height: 30px;
    padding-bottom: 5px;
}
.topbox{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 0.5rem;
    align-items: center;
    font-size: 18px;
    border-bottom: 1px solid rgb(74, 152, 126);
    margin-bottom: 5px;
}
.mainbox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
</style>
